<template>
	<view>
		<!-- 订单状态 -->
		<view class="top" :style="{'background':changeColor(detail.orderStatus)}">
			<view class="top-status">
				<i class="iconfont" :class="detail.orderStatusIcon"></i>{{detail.orderStatusName}}
			</view>
		</view>
		<!-- 地址 -->
		<view class="address">
			<view class="logistics" v-if="detail.orderStatus >= 2">
				<view class="logistics-left">
					<view class="logistics-name">{{detail.orderStatus == 2 ? '您已提交订单，请等待物流更新':'快件已被本人签收'}}</view>
					<view class="logistics-time">2020-2-20 14:03:23</view>
				</view>
				<i class="iconfont iconright"></i>
			</view>
			<view class="address-info"><text>{{detail.orderStatus >= 2 ? '收货人：':''}}{{address.user_name}}</text>{{address.phone}}</view>
			<view class="address-area">{{address.pre_address}}{{address.address}}</view>
		</view>
		<!-- 订单 -->
		<CardMsg :item-id="detail.orderId" :src="detail.orderImage" :name="detail.orderName" :price="detail.price" number="数量:999份; 19年，高三" />
		<!-- 快递 -->
		<view class="express" v-if="detail.orderStatus == 1 || detail.orderStatus == 2">
			<view class="expressCont"><text>配送：</text>阳间快递</view>
		</view>
		<!-- 订单操作 -->
		<view class="btns" v-if="detail.orderStatus > 0">
			<view class="btn-hollow" v-if="detail.orderStatus == 1">申请退款</view>
			<view class="btn-hollow btn-hollow-cancel" v-if="detail.orderStatus == 2">确认收货</view>
			<view class="btn-hollow" v-if="detail.orderStatus >= 2">申请售后</view>
		</view>

		<!-- 订单信息 -->
		<view class="cont">
			<view class="contItem">
				<view class="contItem-left"><text>订单编号：</text>{{detail.orderNo}}</view>
				<view class="contItem-right-btn">复制</view>
			</view>
			<view class="contItem contOther" v-if="detail.orderStatus == 0"><text>创建时间：</text>{{detail.creatTime}}</view>
			<view class="contItem contOther" v-if="detail.orderStatus > 0"><text>下单时间：</text>{{detail.orderTime}}</view>
			<view class="contItem contOther" v-if="detail.orderStatus > 0"><text>支付方式：</text>{{detail.payType}}</view>
			<view class="contItem contOther" v-if="detail.orderStatus > 0"><text>支付时间：</text>{{detail.payTime}}</view>
		</view>

		<!-- 价格模块 -->
		<view class="cont">
			<view class="contItem"><text>商品总额</text>￥{{detail.price}}</view>
			<view class="contItem"><text>运费</text>￥{{detail.fare}}</view>
			<view class="contItem"><text>优惠金额</text>￥{{detail.discount}}</view>
			<view class="contItem contItem-count"><text>{{detail.orderStatus == 0 ? '应付款：':'实付款：'}}</text>￥{{detail.pay}}</view>
		</view>
		<!-- 操作模块 -->
		<view class="btns bottom">
			<view class="btn btn-cancel" v-if="detail.orderStatus == 0">取消订单</view>
			<view class="btn" v-if="detail.orderStatus == 0">立即支付</view>
			<view class="tip" v-if="detail.orderStatus == 1 || detail.orderStatus == 2"><text>共{{detail.count}}件商品 合计：</text>￥{{detail.pay}}</view>
			<view class="btn btn-cancel" v-if="detail.orderStatus == 3">删除订单</view>
			<view class="btn btn-danger" v-if="detail.orderStatus == 3">立即评价</view>
		</view>
	</view>
</template>

<script>
	import CardMsg from "@/components/cardStyle/card-1.0.vue";
	export default {
		components: {
			CardMsg
		},
		data() {
			return {
				detail: {
					orderNo: '202103543956905775024420', //订单编号
					orderStatus: 3, //订单状态
					orderId: '001', //商品ID
					orderName: '五年高考三年模拟001', //商品名称
					orderImage: 'http://mer.crmeb.net/uploads/def/20200829/fd3a5f3f2ffe8e85a2761f979af63cb3.jpg', //商品图片
					discount: '1500.00', //优惠数额
					pay: '1566.00', //实付金额
					fare: '110.00', //运费
					price: '299.00', //商品价格
					orderTime: '2021-02-06 15:54', //下单时间
					creatTime: '2021-02-06 15:54', //创建时间
					payTime: '2021-02-06 15:54', //支付时间
					payType: '微信支付', //支付方式
					count: 1
				},
				address: {
					user_name: '葫芦先生',
					phone: '13620159869',
					default: 1,
					pre_address: '广东省珠海市香洲区',
					address: '国会公寓1栋1601'
				}
			}
		},
		onLoad() {
			this.detail.orderStatusName = this.detail.orderStatus == 0 ? '待付款' : this.detail.orderStatus == 1 ? '等待卖家发货' : this.detail
				.orderStatus == 2 ? '待收货' : this.detail.orderStatus == 3 ? '待评价' : '未知状态';
			this.detail.orderStatusIcon = this.detail.orderStatus == 0 ? 'iconfukuan' : this.detail.orderStatus == 3 ? 'iconpinglun1' : 'icondengdaizhongbeifen';
		},
		methods: {
			// 判断标签颜色
			changeColor(type) {
				if (type == 1) {
					return '#E6B873'
				} else if (type == 2) {
					return '#47B848'
				} else if (type == 3) {
					return '#F37B1D'
				} else {
					return '#E43841'
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		padding-bottom: 200upx;
	}

	.top {
		width: 100%;
		height: 200upx;
	}

	.top-status {
		color: #FFFFFF;
		font-size: 32upx;
		padding-top: 56upx;

		i {
			margin: 0 30upx;
			font-size: 40upx;
		}
	}

	.address {
		padding: 20upx;
		margin: -26upx auto 20upx;
		width: calc(100% - 120upx);
		border-radius: 10upx 10upx 0px 0px;
	}

	.cont {
		padding: 30upx;
		width: calc(100% - 60upx);
		margin-top: 20upx;
		background-color: #FFFFFF;

		.contItem {
			color: #333333;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 20upx;

			.contItem-left {
				width: 80%;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.contItem-right-btn {
				font-size: 24upx;
				padding: 8upx 32upx;
				background-color: #F7F7F7;
				border-radius: 26upx;
			}

			text {
				color: #999999;
				white-space: nowrap;
			}
		}

		.contItem:first-child {
			margin-top: 0;
		}

		.contOther {
			justify-content: flex-start;
		}

		.contItem-count {
			color: #E43841;
			justify-content: flex-end;
		}
	}

	.express {
		background-color: #FFFFFF;
		margin-bottom: 30upx;

		.expressCont {
			color: #333333;
			margin: auto;
			height: 100upx;
			line-height: 100upx;
			padding: 0 20upx;
			width: calc(100% - 100upx);
			background: #F7F7F7;
			border-radius: 10upx;

			text {
				color: #999999;
			}
		}
	}

	.btns {
		height: 60upx;
		padding: 0 30upx 40upx;
	}

	.bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		height: 100upx;
		padding: 0 30upx;

		.tip {
			color: #333333;

			text {
				color: #999999;
			}
		}
	}

	.logistics {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30upx;
		padding-bottom: 30upx;
		border-bottom: 2upx solid #E7E7E7;

		.logistics-left {
			width: 85%;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;

			.logistics-name {
				color: #333333;
				font-size: 32upx;
				margin-bottom: 30upx;
			}

			.logistics-time {
				color: #999999;
			}
		}

		.iconofnt {
			color: #C0C4CC;
		}
	}
</style>
